<template>
    <div id="login">
        <el-form ref="form" :model="user" label-width="30%">
            <el-form-item>
                <h1 style="margin-left: 25%">登录</h1>
            </el-form-item>
            <el-form-item label="账号">
                <el-input v-model="user.username" placeholder="请输入账号" style="width: 70%"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="user.password" type="password" placeholder="请输入密码" style="width: 70%"></el-input>
            </el-form-item>
            <el-form-item label="身份">
                <el-radio-group v-model="user.identity">
                    <el-radio label="0" border size="medium">学生</el-radio>
                    <el-radio label="1" border size="medium">教师</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button @click="login" type="primary" style="margin-right: 41%">登录</el-button>
                <router-link to="/register" style="margin-right: 0"><el-button type="primary">注册</el-button></router-link>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data(){
            return{
                user:{
                    username:'',
                    password:'',
                    identity:'0'
                }
            }
        },
        methods:{
            login(){
                this.axios.post("/login",this.user).then((response)=>{
                    if(response.data.code==100){
                        this.$router.push("/")
                    }
                    console.log(response.data)
                })
            }
        }
    }
</script>

<style>
#login{
    width: 700px;
    height: 400px;
    margin: 0 auto;
    margin-top: 10%;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    background: #fcfcfc;
}
</style>
